<template>
  <div class="box">
    <article>
      <h2>{{ flag ? "正在进行" : "已经完成" }}</h2>
      <p>{{ flag ? num : total }}</p>
    </article>

    <ul>
      <li v-show="v.check == flag" v-for="(v, i) in obj" :key="i">
        <input
          class="input"
          @change="change"
          v-model="v.check"
          type="checkbox"
        />
        <span @dblclick="isShow = i" v-if="isShow != i">{{ v.name }}</span>
        <input @blur="edit" v-model="v.name" v-else type="text" />
        <u @click="remove(i)">x</u>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
import { mixin2 } from "../mixin";
export default {
  props: {
    flag: Boolean,
  },
  data() {
    return {
      isShow: -1,
    };
  },
  mounted() {
    this.$bus.$on("push", this.push);
  },
  mixins: [mixin2],

  computed: {
    ...mapState(["obj"]),
    ...mapGetters(["num", "total"]),
  },
  components: {},
  methods: {
    push(satte) {
      console.log(satte);
    },
  },
};
</script>

<style lang="scss" scoped>
article {
  display: flex;
  justify-content: space-between;
  align-items: center;
  p {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: rgb(224, 116, 14);
    color: #fff;
    border-radius: 100%;
    text-align: center;
    line-height: 30px;
  }
}
.box {
  width: 50%;
  margin: auto;
}
li {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  background-color: rgb(168, 166, 166);
  position: relative;
  font-size: 19px;
  margin: 10px 0;
  border-radius: 15px;
  padding: 0 10px;
  .input {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
  u {
    text-decoration: none;
    position: absolute;
    right: 20px;
  }
}
</style>
